<template>
  <div class="taskPanelBox">
    <!-- 左侧 -->
    <a-row style="width: 100%; height: 100%" v-if="paneData">
      <!-- 右侧 rightColMd -->

      <a-col :md="24" style="height: 100%">
        <div class="taskPanel_right">
          <div class="taskPanel_right_box">
            <div class="taskPanel_right_top">
              <div class="taskPanel_right_top_other">
                <div class="name">
                  填报进度:{{ paneData.accountingTask.ratio }}
                </div>
                <a-progress :percent="percentage" :show-info="false" />
              </div>
              <div class="taskPanel_right_top_header">
                <div class="taskPanel_right_top_header_box">
                  <div class="taskPanel_right_top_header_box_name">
                    <div class="name" style="font-weight: 600; font-size: 14px">
                      {{ paneData.accountingTask.taskName }}
                    </div>
                    <div class="name">
                      创建时间：{{ paneData.accountingTask.createTime }}
                    </div>
                    <div class="name">
                      填报周期：{{ paneData.accountingTask.fillingTime }}
                    </div>
                    <div class="name">
                      采用标准：{{ paneData.accountingTask.standardName }}
                    </div>
                    <div class="name">
                      任务描述：{{ paneData.accountingTask.description }}
                    </div>
                  </div>
                </div>
                <img src="@/assets/img/assets/bg_4.png" />
              </div>
            </div>

            <div class="taskPanel_right_bottom scrollbar">
              <a-tabs :default-active-key="activeKey">
                <a-tab-pane tab="任务概览" key="1">
                  <a-row class="info_box">
                    <a-col :span="24" :lg="24">
                      <div class="title">数据汇总</div>
                      <a-table
                        :columns="columns1"
                        :data-source="computedTableData"
                        :pagination="false"
                        rowKey="key"
                      ></a-table>
                    </a-col>
                    <a-col :span="12" :lg="12">
                      <div class="title">填报进展</div>
                      <div
                        :id="`pie1${paneData.accountingTask.id}`"
                        style="height: 350px"
                      ></div>
                    </a-col>
                    <a-col :span="12" :lg="12">
                      <div class="title">审核进展</div>
                      <div
                        :id="`pie2${paneData.accountingTask.id}`"
                        style="height: 350px"
                      ></div>
                    </a-col>
                  </a-row>
                </a-tab-pane>
                <a-tab-pane tab="任务进展" key="2">
                  <a-row class="info_box">
                    <Progress
                      :taskProgressList="paneData.taskProgressList"
                    ></Progress>
                  </a-row>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import EchartsPie from "@/components/Tools/EchartsPie";
import BigImg from "@/components/Tools/BigImg.vue";
import Progress from "./TaskPanel/Progress.vue";
import { taskList, queryTaskBoundaryList } from "@/api/api";
import { ListMixin } from "@/mixins/ListMixin";
const columns1 = [
  {
    dataIndex: "source",
    title: "源类别",
    key: "source",
    scopedSlots: { customRender: "source" },
  },
  {
    title: "排放量 单位：tCO₂e",
    dataIndex: "emission",
    key: "emission",
  },
];
export default {
  mixins: [ListMixin],
  props: ["paneData"],
  data() {
    return {
      activeKey: "1",
      taskInfo: null,
      taskId: "",
      url: {
        list: "/accounting/task/list",
      },
      columns1,
      columns: [
        {
          title: "任务名称",
          align: "left",
          dataIndex: "taskName",
        },
        {
          title: "任务进度",
          align: "left",
          dataIndex: "roleName",
        },
        {
          title: "任务状态",
          align: "left",
          dataIndex: "taskStatus",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "left",
          scopedSlots: { customRender: "action" },
        },
      ],
      photoVisible: false,
      bigImgUrl: "",
      mockData: [
        {
          title: "范围一 : 直接排放",
          background: "rgba(252, 220, 208, 1),rgba(253, 243, 242, .3)",
          source: [
            {
              name: "固定燃烧",
              iconfont: "icon-jianzhuanquan-",
              background: "#f74b4a",
              facility: [
                {
                  facilityName: "设施1",
                  state: 1,
                },
              ],
            },
            {
              name: "移动燃烧",
              iconfont: "icon-yidong1",
              background: "#f74b4a",
              facility: [],
            },
            {
              name: "工业过程",
              iconfont: "icon-gongye",
              background: "#f74b4a",
              facility: [],
            },
          ],
        },
        {
          title: "范围二 : 直接排放",
          background: "rgba(254, 240, 223, 1),rgba(254, 240, 223, 1)",
          source: [
            {
              name: "采暖设施",
              iconfont: "icon-zuoce-tongfengkongtiaoyucainuan-gaoliang",
              background: "#f8890d",
              facility: [],
            },
            {
              name: "制冷设施",
              iconfont: "icon-qingjingmoshitubiaojiudian_zhileng",
              background: "#f8890d",
              facility: [],
            },
            {
              name: "用电设施",
              iconfont: "icon-yongdianliang",
              background: "#f8890d",
              facility: [],
            },
          ],
        },
      ],
      taskList: [],
    };
  },
  components: {
    BigImg,
    Progress,
  },
  computed: {
    computedTableData() {
      //   console.log(this.paneData);
      var data = [];
      var emissionObject = this.paneData.taskOverview.aggregation;
      for (let key in emissionObject) {
        data.push({
          source: key,
          emission: emissionObject[key],
        });
      }
      for(var i = 0 ; i < data.length ; i++){
        data[i]['key'] = i
      }
      //   console.log(data)
      return data;
    },
    computedPaneData() {
      var scopeObj = {};
      var Category = {};
      //第一层 范畴
      this.paneData.fbList.forEach((item) => {
        if (!scopeObj["scope" + item.scopeCode]) {
          scopeObj["scope" + item.scopeCode] = [];
        }
        scopeObj["scope" + item.scopeCode].push(item);
      });
      // 第二层类别
      for (let key in scopeObj) {
        if (Array.isArray(scopeObj[key])) {
          scopeObj[key].forEach((Accounting) => {
            if (!Category["Category" + Accounting.boundaryCategoryCode]) {
              Category["Category" + Accounting.boundaryCategoryCode] = {};
              if (Accounting.boundaryCategoryCode == 1) {
                Category["Category" + Accounting.boundaryCategoryCode][
                  "background"
                ] = "#f74b4a";
                Category["Category" + Accounting.boundaryCategoryCode][
                  "iconfont"
                ] = "icon-jianzhuanquan-";
              }
              Category["Category" + Accounting.boundaryCategoryCode]["title"] =
                Accounting.scopeName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "categoryName"
              ] = Accounting.boundaryCategoryName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "facilityList"
              ] = [];
            }
            Category["Category" + Accounting.boundaryCategoryCode][
              "facilityList"
            ].push(Accounting);
          });
        }
      }

      //   console.log(Category, scopeObj);
      //   return  this.paneData.fbList
      return Category;
    },
    leftColMd() {
      return !this.taskId ? 24 : 8;
    },
    rightColMd() {
      return !this.taskId ? 0 : 16;
    },
    percentage() {
      if (this.paneData.accountingTask.ratio) {
        let a = this.paneData.accountingTask.ratio.split("/");
        return (Number(a[0]) / Number(a[1])) * 100;
      } else {
        return 0;
      }
    },
    // facilityComputed() {
    //   return function (item) {
    //     var total = 0;
    //     var finishNum = 0;
    //     item.facility.forEach((facility) => {
    //       if (facility.state == 1) {
    //         finishNum++;
    //       }
    //       total++;
    //     });
    //     return `${finishNum}/${total}`;
    //   };
    // },
    // headerComputed() {
    //   return function (value) {
    //     var total = 0;
    //     var finishNum = 0;
    //     value.facilityList.forEach((facility) => {
    //       if (facility.boundaryCategoryCode == 1) {
    //         finishNum++;
    //       }
    //       total++;
    //     });

    //     return ` ${finishNum}/${total}`;
    //   };
    // },
  },
  mounted() {
    this.drawPie1();
    this.drawPie2();
  },
  methods: {
    drawPie1() {
      let myChart = this.$echarts.init(
        document.getElementById(`pie1${this.paneData.accountingTask.id}`)
      );
      var option = {
        title: {
          text:  this.paneData.taskOverview.fillStatus[0].value,
          subtext: this.paneData.taskOverview.fillStatus[0].name,
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 30,
            fontWeight: "bold",
            color: ["#333"],
          },
          subtextStyle: {
            color: "#666",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "填报进展",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.paneData.taskOverview.fillStatus[0].value,
                name: this.paneData.taskOverview.fillStatus[0].name,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                      [
                        { offset: 0, color: "#81d2fb" },
                        { offset: 0.5, color: "#3dbaf9" },
                      ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    ),
                  },
                },
              },
              {
                     value: this.paneData.taskOverview.fillStatus[1].value,
                name: this.paneData.taskOverview.fillStatus[1].name,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                      [
                        { offset: 0, color: "#d2e3f1" },
                        { offset: 0.5, color: "#bdc9e2" },
                      ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    ),
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    drawPie2() {
      let myChart = this.$echarts.init(
        document.getElementById(`pie2${this.paneData.accountingTask.id}`)
      );
      var option = {
        title: {
          text:this.paneData.taskOverview.checkStatus[0].value,
          subtext:this.paneData.taskOverview.checkStatus[0].name,
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 30,
            fontWeight: "bold",
            color: ["#333"],
          },
          subtextStyle: {
            color: "#666",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "审核进展",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value:this.paneData.taskOverview.checkStatus[0].value,
                name: this.paneData.taskOverview.checkStatus[0].name,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                      [
                        { offset: 0, color: "#7fe3b6" },
                        { offset: 0.5, color: "#5de9a9" },
                      ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    ),
                  },
                },
              },
              {
                value: this.paneData.taskOverview.checkStatus[1].value,
                name:  this.paneData.taskOverview.checkStatus[1].name,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                      [
                        { offset: 0, color: "#d2e3f1" },
                        { offset: 0.5, color: "#bdc9e2" },
                      ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    ),
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    closeTaskInfo() {},
    searchQuery() {},
    showBigImage(e) {
      //点击图片函数，点击后，把photoVisible设置成true
      if (e != "") {
        this.photoVisible = true;
        this.bigImgUrl = e.currentTarget.src;
      }
    },

    onSearch() {},
  },
};
</script>

<style lang="scss" >
@import "@/assets/css/taskPanel.scss";
@import "@/assets/css/scrollbar.scss";
.taskPanelBox{
  .ant-tabs-bar {
margin: 0 0 0px 0 !important;
}
}


</style>


